<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<div>Hello {name}</div>
<button on:click={handleClick}>改名</button>
<div title="{name}">{sayHi()}</div>
<div>{a} + {b} = {a + b}</div>
<div>{state ? '111' : '222'}</div>
<div>{@html h1}</div>
<div style="color: {color}">biansele</div>
<div class:active="{foo}">样式绑定在class上的内容</div>
<!-- 条件渲染 -->
{#if foo}
  <div>显示</div>
{:else}
  <div>不显示</div>
{/if}
<!-- 列表渲染 -->
<ol>
{#each list as {name}, index}
  <li>{name} == {index}</li>
{:else}
  <div>暂无数据</div>
{/each}
</ol>
<input type="text" bind:value={msg}>{msg}
<button on:click={changeValue}>改变数据了</button>
<input type="range" name="" id="" bind:value min="1" max="100">{value}
<div>
  <input type="radio" name="" id="" bind:group={selected} value="1">1
  <input type="radio" name="" id="" bind:group={selected} value="2">2
  <input type="radio" name="" id="" bind:group={selected} value="3">3
</div>
<p>{selected}</p>
<Comps value="{value}" on:printPhone={print}>
  <div>电话：</div>
  <div>15234492364</div>
</Comps>

<script>
  import Comps from './comps.svelte'
  let selected = 2
  let msg = 'hello'
  let value = 0

  let time = setInterval(() => {
    if (value >= 100) {
      console.log('object');
      // time.clear()
      clearInterval(time)
      return
    }
    value += 10
    
  }, 1000);

  function changeValue() {
    msg = msg + 'o'
  }

  // let time = setInterval(() => {
  //   if (!msg.length) {
  //     time.clear()
  //   }
  //   console.log(msg);
  // }, 1000);

  if (!msg.length) {
    time.clear
  }

  let name = 'moyu'

  function handleClick() {
    name = 'moyuand'
  }
  function sayHi() {
    return `${name} 世界！`
  }

  let a = 1
  let b = 2

  let state = false
  
  let h1 = '<h1 style="color: pink;">墨羽</h1>'

  let color = 'red'

  setTimeout(() => {
    color = 'blue'
  }, 5000);

  let foo = true

  setTimeout(() => {
    foo = false
  }, 5000);

  let list = [{name: 'hhh'}, {name: 'hhh2'}, {name: 'hhh3'}]

  function print(data) {
    console.log(`手机号：${data.detail}`)
  }
</script>
<style>
  .active {
    color: red;
  }
</style>
